<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="foo"></div>
<template id="bar">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</template>
<script>
    /*
        使用<template>标签
     */
    const fooElement = document.querySelector('#foo')
    const barTemplate = document.querySelector('#bar')
    const barFragment = barTemplate.content;
    // 添加到foo下,但是bar下的话转移
    // fooElement.appendChild(barFragment)
    
    
    /*
        如果是复制模板的话,用importNode()
     */
    fooElement.appendChild(document.importNode(barFragment,true))

    console.log(document.body.innerHTML)


</script>
</body>
</html>